 <template>
 	<view class="container">
 		<!-- 支付状态 -->
 		<view class="item">
 			<view class="icon">
 				<u-image width="180rpx" height="180rpx" src="/static/images/a21.png"></u-image>
 			</view>
 			<view style="width: 100%;">
 				<view class="user-info-box">
 					<view class="user-info">
 						<view class="name">易小博</view>
 						<view class="age">男 35</view>
 					</view>
 					<view class="status-box">
 						<view class="status" style="display: flex;align-items: center;">
							<text>待支付：</text>
							<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
						</view>
 						<!-- <view class="done">已完成</view>
 						<view class="status" style="margin-left: 10rpx;">退款中</view> -->
 					</view>
 				</view>
 				<view class="mobile">
 					183****1225
 				</view>
 			</view>
 		</view>

 		<!-- 挂号信息 -->
 		<view class="order-item">
 			<view class="status-box">
 				<view class="name">挂号信息</view>
 			</view>
 			<view class="content-box">
 				<view class="content-item">
 					<text>医院：</text>
 					<text>翊博门诊</text>
 				</view>
 				<view class="content-item">
 					<text>科室：</text>
 					<text>脑血管科</text>
 				</view>
 				<view class="content-item">
 					<text>医生：</text>
 					<text>李医生</text>
 				</view>
 				<view class="content-item" >
 					<text>就诊日期：</text>
 					<text>2023-11-16 15:00-17:00</text>
 				</view>
				<view class="content-item">
					<text>挂号费用：</text>
					<text>123元</text>
				</view>
 			</view>
 			<view class="btns-box">
 				<view class="message">请在就诊当天前往医院就诊</view>
 				<view class="">
 					<!-- <u-button throttleTime="1000" :customStyle="{height: '56rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">去支付</u-button> -->
 					<u-button throttleTime="1000" :customStyle="{height: '56rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini"
 						shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="showCancelPop">退号</u-button>
 				</view>
 			</view>
 		</view>

 		<!-- 支付信息 -->
 		<view class="order-item">
 			<view class="status-box">
 				<view class="name">支付信息</view>
 			</view>
 			<view class="content-box">
 				<view class="content-item">
 					<text>支付状态：</text>
 					<text>已支付</text>
 				</view>
 				<view class="content-item">
 					<text>支付时间：</text>
 					<text>2023-12-16 15:00:16</text>
 				</view>
 				<view class="content-item">
 					<text>支付订单号：</text>
 					<text>156343215645634153126</text>
 				</view>
 			</view>
 		</view>

 		<!-- 退号信息 -->
 		<view class="order-item">
 			<view class="status-box">
 				<view class="name">退号信息</view>
 			</view>
 			<view class="content-box">
 				<view class="content-item">
 					<text>退号原因：</text>
 					<text>换个时间段</text>
 				</view>
 				<view class="content-item">
 					<text>申请时间：</text>
 					<text>2023-12-16 15:00:16</text>
 				</view>
				<view class="content-item">
					<text>退款到账时间：</text>
					<text>2023-12-16 15:00:16</text>
				</view>
 			</view>
 		</view>
 	</view>
	
 	<!-- 取消订单弹窗 -->
 	<u-popup closeable bgColor="transparent" :show="cancelPop" @close="cancelPop = false">
 		<view class="cancel-pop">
 			<view class="pop-title">取消订单</view>
 			<view class="info">
 				<view>预约项目</view>
 				<view>翊博门诊 李医生 3023-11-04 11:00-13:00</view>
 				<view style="margin-bottom: 0;">就诊人：易小博 男 151****4656</view>
 			</view>
 			<view class="pop-title">请选择退号的原因（必选）：</view>
 			<view class="radio-wrap">
 				<u-radio-group v-model="radiovalue" placement="column">
 					<u-radio  :customStyle="{marginBottom: '46rpx'}" v-for="(item, index) in radiolist" :key="index" activeColor="#6087EF"
 						:label="item.name" :name="item.name">
 					</u-radio>
 				</u-radio-group>
 			</view>
			<view class="btn">
				<u-button throttleTime="1000" :customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">确认</u-button>
			</view>
 		</view>
 	</u-popup>
 </template>

 <script setup>
	 
 	const cancelPop = ref(false)
	const radiovalue = ref('')
	const radiolist = ref([
		{
			name: '不想要了',
		},
		{
			name: '挂号选错/多选',
		},
		{
			name: '就诊人填错了',
		},
		{
			name: '时间选错了',
		},
		{
			name: '有跟便宜的了，不想要了/其他原因',
		},
	])
	
	const showCancelPop = () => {
		cancelPop.value = true
	}
 </script>

 <style lang="scss" scoped>
 	.container {
 		padding: 60rpx 26rpx 100rpx;
 	}
	
	

 	.item {
 		@include between(100%);
 		position: relative;
 		margin-bottom: 40rpx;
 		padding: 34rpx 38rpx;
 		background: #FFFFFF;
 		border-radius: 30rpx;

 		.icon {
 			position: absolute;
 			top: 0;
 			right: 38rpx;
 			z-index: 9;
 		}

 		.user-info-box {
 			position: relative;
 			@include between(100%);
 			z-index: 99;

 			.status-box {
 				display: flex;
 				align-items: center;
 			}

 			.status {
 				color: #6087EF;
 			}

 			.done {
 				color: #AAAAAA;
 			}
 		}

 		.user-info {
 			@include start();
 			align-items: flex-end;

 			.name {
 				font-size: 32rpx;
 				color: #312C2A;
 			}

 			.age {
 				font-size: 26rpx;
 				color: #606672;
 				margin-left: 26rpx;
 			}

 			.self {
 				@include center(86rpx, 38rpx);
 				margin-left: 30rpx;
 				background: linear-gradient(315deg, #D66A44 0%, #ECBFAF 100%);
 				border-radius: 7rpx;
 				font-size: 26rpx;
 				color: #fff;
 			}
 		}

 		.mobile {
 			margin-top: 38rpx;
 			font-size: 26rpx;
 			color: #606672;
 		}
 	}

 	.order-item {
 		margin-bottom: 30rpx;
 		padding: 38rpx 38rpx 1rpx;
 		background: #FFFFFF;
 		border-radius: 30rpx;

 		.status-box {
 			padding-bottom: 32rpx;
 			border-bottom: 1rpx solid #E8E8E8;
 			margin-bottom: 30rpx;

 			.name {
 				font-size: 30rpx;
 				color: #312C2A;
 			}

 			.status {
 				color: #6087EF;
 			}

 			.status1 {
 				color: #AAAAAA;
 			}
 		}

 		.content-box {
 			width: 100%;
 			position: relative;
 			font-size: 26rpx;
 			color: #606672;

 			.content-item {
 				@include between(100%);
 				margin-bottom: 30rpx;
 				font-size: 26rpx;
 				color: #606672;

 				&>text {
 					&:nth-child(2) {
 						color: #312C2A;
 					}
 				}
 			}

 			.icon {
 				position: absolute;
 				bottom: 0;
 				right: 0;
 				z-index: 99;
 			}
 		}

 		.btns-box {
 			padding-top: 32rpx;
			padding-bottom: 37rpx;
 			border-top: 1rpx solid #E8E8E8;
 			margin-top: 30rpx;
 			@include between(100%);

 			.message {
 				font-size: 26rpx;
 				color: #6087EF;
 			}
 		}
 	}

 	.cancel-pop {
 		padding: 40rpx;
 		background: #FFFFFF;
 		box-shadow: 0rpx 0rpx 30rpx 1rpx rgba(153, 153, 153, 0.16);
 		border-radius: 30rpx 30rpx 0rpx 0rpx;

 		.pop-title {
 			color: #000000;
 			font-size: 32rpx;
 		}

 		.info {
 			margin-top: 14rpx;
 			margin-bottom: 40rpx;
 			background: #F6F6F6;
 			border-radius: 20rpx;
 			padding: 26rpx 30rpx;
 			color: #000000;

 			&>view {
 				margin-bottom: 16rpx;
 			}
 		}
		.radio-wrap {
			margin-top: 36rpx;
		}
		.btn {
			// box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0,0,0,0.1);
			margin-top: 50rpx;
		}
 	}
 </style>